<template>
    <div class="container">
      <!-- 查询条件和按钮 -->
      <el-card class="box-card">
        <el-form ref="searchForm" :model="searchForm" inline class="small-form">
          <el-form-item label="日期范围">
            <el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="searchForm.start" placeholder="开始日期" size="small"></el-date-picker>
            <el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="searchForm.end" placeholder="结束日期" size="small"></el-date-picker>
            <!-- <el-date-picker
              value-format="yyyy-MM-dd" format="yyyy-MM-dd" 
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
            ></el-date-picker> -->
          </el-form-item>
          <el-form-item label="偏爱优先级">
            <el-select v-model="searchForm.priority" placeholder="请选择" size="small">
              <el-option label="高" value="高"></el-option>
              <el-option label="中" value="中"></el-option>
              <el-option label="低" value="低"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位">
            <el-input v-model="searchForm.jobTitle" placeholder="请输入岗位名称" size="small"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch" size="small">查询</el-button>
            <el-button @click="handleReset" size="small">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <!-- 今日笔试建议按钮 -->
      <el-card class="box-card" style="margin-top: 10px;">
        <el-button type="primary" @click="showSuggestion" size="small">今日笔试建议</el-button>
      </el-card>
  
      <!-- 建议卡片 -->
      <el-dialog :visible.sync="suggestionDialogVisible" title="今日笔试建议" width="50%">
        <p>{{ suggestion }}</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="suggestionDialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>
  
      <!-- 简历投递记录表 -->
      <el-card class="box-card" style="margin-top: 10px;">
        <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'examStartTime', order: 'ascending' }" size="small">
          <el-table-column prop="company" label="公司" :min-width="120"></el-table-column>
          <el-table-column prop="jobTitle" label="岗位名称" :min-width="120"></el-table-column>
          <el-table-column prop="website" label="笔试链接" :min-width="150">
            <template slot-scope="scope">
            <a :href="scope.row.website" target="_blank">{{ scope.row.website }}</a>
          </template>
        </el-table-column>
          <el-table-column prop="start" label="开始日期" :min-width="100" sortable></el-table-column>
          <el-table-column prop="startTime" label="开始时间" :min-width="120" sortable></el-table-column>
          <el-table-column prop="intent" label="偏爱级" :min-width="100" sortable></el-table-column>
          <el-table-column label="备注" :min-width="150">
            <template slot-scope="scope">
              <el-popover
                placement="top-start"
                width="200"
                trigger="click"
                :content="scope.row.notes"
              >
                <el-button slot="reference" type="text" size="small">{{ scope.row.notes ? '查看备注' : '无备注' }}</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页 -->
        <el-pagination
        background
          @current-change="handlePageChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
          style="margin-top: 10px;"
        ></el-pagination>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        searchForm: {
          start: '',
          end:'',
          priority: '',
          jobTitle: ''
        },
        tableData: [{
            jobTitle: '笔试',
          startDate: '2024-05-17',
          startTime: '10:00',
          endTime: '12:00',
          company: '公司A',
          intent: '高',
          examLink:'www.baidu.com',
          notes:'1234567'
          },
          {
            jobTitle: '笔试',
          startDate: '2024-05-17',
          startTime: '14:00',
          endTime: '12:00',
          company: '公司A',
          intent: '高',
          examLink:'aigc.vivo.com'
          },
          {
            jobTitle: '笔试',
          startDate: '2024-05-21',
          startTime: '10:00',
          endTime: '12:00',
          company: '公司A',
          intent: '高',
          examLink:'www.pku.edu.cn'
          },],
        currentPage: 1,
        pageSize: 5,
        total: 3,
        suggestionDialogVisible: false,
        suggestion: '1234567'
      };
    },
    methods: {
      handleSearch() {
        // 调用后端API进行查询
        const params = {
          start: this.searchForm.start,
          end: this.searchForm.end,
          intent: this.searchForm.priority,
          jobTitle: this.searchForm.jobTitle,
          currentPage: this.currentPage,
          size: this.pageSize
        };
        this.$request.get('/info/searchExam', { params })
          .then(response => {
            this.tableData = response.data?.list;
            this.total = response.data?.total;
          })
          .catch(error => {
            console.error('查询失败', error);
            this.$message.error('查询失败');
          });
      },
      handleReset() {
        this.searchForm.start = '';
        this.searchForm.end = '';
        this.searchForm.priority = '';
        this.searchForm.jobTitle = '';
      },
      showSuggestion() {
        // 调用后端API获取AI生成的建议
        this.$request.get('/info/suggestion')
          .then(response => {
            this.suggestion = response.data;
            this.suggestionDialogVisible = true;
          })
          .catch(error => {
            console.error('获取建议失败', error);
            this.$message.error('获取建议失败');
          });
      },
      handlePageChange(page) {
        this.currentPage = page;
        this.handleSearch();
      }
    },
    created() {
      this.handleSearch();
    }
  };
  </script>
  
  <style scoped>
  .container {
    padding: 10px;
    background: #f5f5f5;
    font-size: 14px; /* 缩小字体 */
    overflow-x: hidden; /* 防止水平滚动条 */
  }
  
  .small-form .el-form-item {
    margin-bottom: 10px; /* 缩小表单项的间距 */
  }
  
  .el-dialog {
    max-width: 600px;
  }
  
  .dialog-footer {
    text-align: right;
  }
  
  .el-table .el-table-column--small .cell {
    font-size: 14px; /* 缩小表格字体 */
  }
  
  .el-button--small {
    padding: 5px 10px; /* 缩小按钮的内边距 */
  }
  
  .el-table th {
    background-color: #f2f2f2; /* 设置表格标题行的浅灰色背景 */
    border-radius: 8px; /* 设置表格标题行圆角 */
    padding: 10px; /* 设置表格标题行内边距 */
  }
  
  .el-table th::before {
    content: ''; /* 清除表格标题行的默认边框 */
  }
  
  .el-pagination {
    margin-top: 10px;
  }
  </style>